<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
<title>KISSY Anim Target</title>
<script src="/kissy/build/seed.js"></script>
    <script src="/kissy/src/package.js"></script>
<link rel="stylesheet" href="../assets/cool.css"/>
<style>
    .ks-overlay-ghost {
        opacity: .65;
    }

    .ks-ie6 .ks-overlay-ghost, .ks-ie7 .ks-overlay-ghost {
        filter: alpha(opacity = 65);
    }
</style>
</head>
<body>

<div style="height:800px;width: 950px;margin: 0px auto;padding: 20px;">
    <button id="t2">open dialog with target anim</button>
</div>

<script>

        KISSY.use("overlay", function (S, Overlay) {
            var o = new Overlay.Dialog({
                width:500,
                height:500,
                mask:true,
                zIndex:1000,
                closable:true,
                bodyContent:'<div style="height: 200px">test</div>',
                effect:{
                    duration:.2,
                    easing:'easingStrong',
                    target:S.all('#t2')
                }
            });
            S.all("#t2").on("click", function () {
                o.center().show();
            });
            o.on('show',function(){
                S.log('show');
            });
            o.on('hide',function(){
                S.log('hide');
            });
        });

</script>
</body>
</html>